<template>
  <div class="w-full h-full ">
    <div id="lineChart" class="w-full h-full"></div>
  </div>
</template>

<script setup>
import { onMounted } from 'vue'
import * as echarts from 'echarts'

const props = defineProps({
  lineData: {
    type: Object,
    default: () => null,
  },
})

const emit = defineEmits(['changeDate'])

onMounted(
    () => {
      initLine()
    },
)

const initLine = () => {
  // 拿到props.lineData的key
  const keys = Object.keys(props.lineData)
  // 拿到props.lineData的value
  const values = Object.values(props.lineData)
  const valuesData =  values.map(item => item.length)
  var chartDom = document.getElementById('lineChart')
  var myChart = echarts.init(chartDom)
  var option

  option = {
    xAxis: {
      type: 'category',
      data: keys,
      axisLabel: {//x轴文字的配置
        show: true,
        textStyle: {
          color: '#fff',
        },
      },
      axisLine: { //x轴线的颜色以及宽度
        show: true,
        lineStyle: {
          color: '#fff',
          width: 0,
          type: 'solid',
        },
      },
    },
    yAxis: {
      type: 'value',
      axisLine: { //x轴线的颜色以及宽度
        show: true,
        lineStyle: {
          color: '#fff',
          width: 0,
          type: 'solid',
        },
      },
    },
    series: [
      {
        data: valuesData,
        type: 'line',
      },
    ],
    tooltip: {
      trigger: 'axis',
      axisPointer: {
        type: 'shadow',
      },
      backgroundColor: '#fff', // 悬浮框背景色
      borderColor: '#c5c5c5', // 悬浮框边框颜色
      borderWidth: 0.5, // 悬浮框边框宽度
      textStyle: { // 悬浮框文字样式
        color: '#5e5e5e',
        fontSize: 12,
        fontWeight: 'normal',
      },
    },
    labelLine: {
      show: true,
      showAbove: true,
    },
    grid: {
      top: 40,
      left: 50,
      bottom: 24,
    },
  }

  option && myChart.setOption(option)

  myChart.on('click', (params) => {
    emit('changeDate', params.name)
  })
}

</script>

<style lang="scss" scoped>

</style>
